---
title: 'Sidebar plugin'
description: 'A component for adding a sidebar to the calendar, with calendar toggles and possibility to add drag-to-create placeholder events.'
---

# Sidebar

A component for adding a sidebar to the calendar. Enables you to toggle the visibility of calendars, adds a button
for opening the interactive event modal, and enables you to create events through dragging and dropping placeholder
events.

import {Callout} from "nextra/components";

<Callout type="info">
  This is a premium plugin which requires an active license to be used. Learn more at [Schedule-X premium](/premium).
</Callout>

## Features & demo
import FeaturesList from "../../../../../components/partials/features-list/features-list";

<FeaturesList features={[
    'Toggle visibility of calendars',
    'Open interactive event modal',
    'Drag to create events'
]} />

[Go to Demo](/demos/modal-and-sidebar)

<br />

<video autoPlay loop playsInline muted id={'demo'} className="landingPageDemoVideo" width={800} height={250}>
  <source src={'https://d19hgxvhjb2new.cloudfront.net/website/sidebar-demo.mp4'} type={'video/mp4'} />
</video>

## 2. Installation

### 2.1 Set up premium auth (only once)

Follow the [instructions for setting up an `.npmrc`](/docs/calendar/installing-premium)


### 2.2 Install

```bash copy
npm install @sx-premium/sidebar
```

## Usage

```js
import { createCalendar } from '@schedule-x/calendar'
import { createSidebarPlugin, translations as sidebarTranslations } from "@sx-premium/sidebar";
import { createEventsServicePlugin } from "@schedule-x/events-service";
import { createInteractiveEventModal, translations as modalTranslations } from "@sx-premium/interactive-event-modal";
import { createDragToCreatePlugin } from "@sx-premium/drag-to-create";
import { translations, mergeLocales } from '@schedule-x/translations'

import '@sx-premium/sidebar/index.css'
import '@sx-premium/interactive-event-modal/index.css'
import '@schedule-x/theme-default/dist/time-picker.css'

const eventsService = createEventsServicePlugin()
const interactiveEventModal = createInteractiveEventModal({
  eventsService,
  availablePeople: ['John Doe', 'Jane Doe'],
  onAddEvent: (event) => {
    console.log('Event added', event)
  }
})
const sidebar = createSidebarPlugin({
  eventsService,

  // Optional: Should the sidebar be open on render
  openOnRender: false,

  // Optional: Which calendars should be active on render
  activeCalendarIds: ['personal', 'work', 'leisure', 'school'],

  // Optional: Should there be calendar toggles
  hasCalendarToggles: true,

  // Optional: placeholder events for drag-to-create. These can later be updated by calling updatePlaceholderEvents
  placeholderEvents: [
    {
      title: 'Morning brief',
      calendarId: 'internal',
      people: ['John Doe', 'Jane Doe', 'Steve Smith'],
    },
    {
      title: 'Client demo',
      calendarId: 'internal',
      people: ['John Doe', 'Jane Doe'],
    },
    {
      title: 'Team meeting',
      calendarId: 'clients',
      people: ['John Doe', 'Jane Doe', 'Steve Smith'],
    }
  ],

  /**
  * Optional: Should placeholder events be selectable
  * If set to true, you can later grab the currently selected placeholder event via sidebar.selectedPlaceholderEvent.value
  * This can, for example, help your users draw events belonging to different calendars
  * */
  isPlaceholderEventSelectable: true,

  // Optional: factory function for generating event ids when events are created
  idFactory: () => uuidv4() // or any other id generator
})

// Update placeholder events
sidebar.updatePlaceholderEvents([
  {
    title: 'event 1',
    calendarId: 'internal',
  }
])

const calendar = createCalendar(
  {
    translations: mergeLocales(
      translations,
      sidebarTranslations,
      modalTranslations
    ),

    plugins: [
      eventsService,
      sidebar,
      interactiveEventModal,
      createDragToCreatePlugin(/* drag-to-create options */)
    ]
    // ...config options
  },
)

calendar.render(document.getElementById('your-calendar-wrapper'))
```

## Changelog

See [changelog](/premium-changelog) page.

## Examples

These can be added on request. Please let us know if you need an example for a specific framework.

* React example: https://github.com/schedule-x/react-examples/blob/main/sidebar/src/App.tsx
* Angular example: https://github.com/schedule-x/angular-examples/tree/main/sidebar--modal--drag-to-create
* Svelte example: https://github.com/schedule-x/svelte-examples
